<template>
	<Layout class="p-5 bg-white">
		<el-row>
			<div>
				<Row align="middle" justify="center">
					<Col>
					<h1 style="text-align: center; ">个人中心</h1>
					</Col>
				</Row>
			</div>
			<template>
			    <Layout class="p-5 bg-white">
			        <Form class="p-5"  :label-width="80">
						<Row>
							<Col span="8">
								<FormItem class="w-100" label="账号">
									<Input v-model="client.account"/>
								</FormItem>
								<FormItem class="w-100" label="密码">
									<Input v-model="client.password"/>
								</FormItem>
								<FormItem class="w-100" label="电话">
									<Input v-model="person.phone"/>
								</FormItem></Col>
							<Col span="8">
								<FormItem class="w-100" label="身份证">
									<Input v-model="person.identityCard"/>
								</FormItem>
							</Col>
						</Row>
						<FormItem>
						    <Button @click="edeit()" type="primary">提交</Button>
						    <Button @click="cancel" style="margin-left: 8px">取消</Button>
						</FormItem>
			        </Form>
			    </Layout>
			</template>
			
			<el-col :span="4">

			</el-col>
		</el-row>
		<div>
			<Row align="middle" justify="center">
				<Col>
				<h3 style="text-align: center; ">车房信息</h3>
				</Col>
			</Row>
		</div>
		<el-row>
			<el-select v-model="conditionId" clearable placeholder="买车信息" size="small"
				style="width: 100px;margin-right: 20px;" @change="selectId">
				<el-option v-for="item in carConditions" :key="item.conditionId" :label="item.label"
					:value="item.conditionId">
				</el-option>
			</el-select>
			<el-select v-model="mileageId" clearable placeholder="房屋出租" size="small"
				style="width: 100px;margin-right: 20px;" @change="selectId1">
				<el-option v-for="item in mileages" :key="item.mileageId" :label="item.label" :value="item.mileageId">
				</el-option>
			</el-select>
		</el-row>
		<Layout :class="'bg-white'">
			<!--  -->
			<Table v-if="conditionId==1" border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">

			</Table>

			<Table v-if="conditionId==2" border :class="'m-1'" :columns="houseBuyInfo.columnInfo"
				:data="houseBuyInfo.data">

			</Table>
			<Table v-if="conditionId==3" border :class="'m-1'" :columns="carRetalInfo.columnInfo"
				:data="carRetalInfo.data">

			</Table>
			<Table v-if="conditionId==4" border :class="'m-1'" :columns="houseLeaseInfo.columnInfo"
				:data="houseLeaseInfo.data">

			</Table>
			<!-- 房屋出租 -->
			<Table v-if="mileageId==1" border :class="'m-1'" :columns="houseRentInfo.columnInfo"
				:data="houseRentInfo.data">

			</Table>
			<Table v-if="mileageId==2" border :class="'m-1'" :columns="houseSellInfo.columnInfo"
				:data="houseSellInfo.data">

			</Table>
			<!--房屋求租  -->
			<Table v-if="mileageId==3" border :class="'m-1'" :columns="houseRental.columnInfo" :data="houseRental.data">

			</Table>
			<!--房屋求购  -->
			<Table v-if="mileageId==4" border :class="'m-1'" :columns="houseBuy.columnInfo" :data="houseBuy.data">

			</Table>
			<!-- 车辆出租 -->
			</Table>
			<Table v-if="mileageId==5" border :class="'m-1'" :columns="carRentBuyInfo.columnInfo"
				:data="carRentBuyInfo.data">

				<!-- 车辆出售 -->
			</Table>
			<Table v-if="mileageId==6" border :class="'m-1'" :columns="carRentBuyInfo.columnInfo"
				:data="carRentBuyInfo.data">

				<!-- 车辆求租 -->
			</Table>
			<Table v-if="mileageId==7" border :class="'m-1'" :columns="carRent.columnInfo" :data="carRent.data">

				<!-- 车辆求购 -->
			</Table>
			<Table v-if="mileageId==8" border :class="'m-1'" :columns="carBuy.columnInfo" :data="carBuy.data">

			</Table>

			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>


</template>
<script>
	export default {
		data() {
			return {
				pageSearch:"",
				conditionId: null,
				mileageId: null,
				clientId: null,
				client: {
					clientId: "",
					account: "",
					personId: "",
					password: "",
					tel: "",
					secId: "",
					ct: ""
				},
				person: {
					personId: "",
					phone: "",
					identityCard: "",
					personName: "",
				},

				//买车信息
				tableInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "标题",
							key: "title",
						},
						{
							title: "详细信息",
							key: "details",
						},
						{
							title: "发布人",
							key: "personName",
						},
						{
							title: "手机号",
							key: "phone",
						},
						{
							title: "创建时间",
							key: "ct",
						}
					],

					data: [],
					brands: [],
				},
				//买房信息
				houseBuyInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "标题",
							key: "title",
						},
						{
							title: "详细信息",
							key: "details",
						},
						{
							title: "发布人",
							key: "personName",
						},
						{
							title: "手机号",
							key: "phone",
						},
						{
							title: "创建时间",
							key: "ct",
						}
					],

					data: [],
					brands: [],
				},
				//租房信息
				houseLeaseInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "租房编号",
							key: "lease  Id",
							width: 70
						},
						{
							title: "描述",
							key: "des",
							width: 300
						},
						{
							title: "省",
							key: "provienceId",
							width: 70
						},
						{
							title: "市",
							key: "cityId",
							width: 70
						},
						{
							title: "区",
							key: "reignId",
							width: 70
						},

						{
							title: "详细地址",
							key: "detailLocation",
							width: 300
						},

						{
							title: "面积",
							key: "area",
							width: 100
						}
					],
					data: [],
					brands: [],
				},
				//租车信息
				carRetalInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "车辆编号",
							key: "carId",
						},
						{
							title: "车名",
							key: "name",
						},
						{
							title: "表显里程",
							key: "mileage",
						},
						{
							title: "燃油类型",
							key: "energy",
						},
						{
							title: "车型",
							key: "type",
						},
						{
							title: "颜色",
							key: "color",
						},
						{
							title: "车龄",
							key: "carCondition",
						}
					],
					data: [],
					brands: [],
				},
				//董
				//房出租
				houseRentInfo: {
					currentPage: 1,
					total: 0,
					columnInfo: [{
							title: "租房编号",
							key: "leaseId",
							width: 70
						},
						{
							title: "描述",
							key: "des",
							width: 300
						},
						{
							title: "省",
							key: "provienceId",
							width: 70
						},
						{
							title: "市",
							key: "cityId",
							width: 70
						},
						{
							title: "区",
							key: "reignId",
							width: 70
						},

						{
							title: "详细地址",
							key: "detailLocation",
							width: 300
						},

						{
							title: "面积",
							key: "area",
							width: 100
						}
					],
					data: [],
					brands: [],
				},
				//房出售
				houseSellInfo: {
					currentPage: 1,
					total: 0,
					propertType: 0,
					columnInfo: [{
							title: "卖房编号",
							key: "sellId",
							width: 70
						},
						{
							title: "描述",
							key: "des",
							width: 300
						},
						{
							title: "省",
							key: "provienceId",
							width: 70
						},
						{
							title: "市",
							key: "cityId",
							width: 70
						},
						{
							title: "区",
							key: "reignId",
							width: 70
						},

						{
							title: "详细地址",
							key: "detailLocation",
							width: 250
						},
						{
							title: "面积",
							key: "area",
							width: 100
						},
						{
							title: "总价",
							key: "totalPrice",
							width: 100
						},
						{
							title: "产权类型",
							key: "typeName",
							width: 100
						}
					],

					data: [],
					brands: [],
				},
				//房求租
				houseRental: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "标题",
							key: "title",
						},
						{
							title: "详细信息",
							key: "details",
						},
						{
							title: "发布人",
							key: "personName",
						},
						{
							title: "手机号",
							key: "phone",
						},
						{
							title: "创建时间",
							key: "ct",
						}
					],
					data: [],
					brands: [],
				},
				//房求购
				houseBuy: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "标题",
							key: "title",
						},
						{
							title: "详细信息",
							key: "details",
						},
						{
							title: "发布人",
							key: "personName",
						},
						{
							title: "手机号",
							key: "phone",
						},
						{
							title: "创建时间",
							key: "ct",
						}
					],
					data: [],
					brands: [],
				},
				//车辆出售，出租
				carRentBuyInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "车辆编号",
							key: "carId",
						},
						{
							title: "车名",
							key: "name",
						},
						{
							title: "表显里程",
							key: "mileage",
						},
						{
							title: "燃油类型",
							key: "energy",
						},
						{
							title: "车型",
							key: "type",
						},
						{
							title: "颜色",
							key: "color",
						},
						{
							title: "车龄",
							key: "carCondition",
						}
					],

					data: [],
					brands: [],
				},
				//求租
				carRent: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "车辆描述",
							key: "title",
						},
						{
							title: "车辆详情",
							key: "details",
						},
						{
							title: "联系人",
							key: "personName",
						},
						{
							title: "联系电话",
							key: "phone",
						},
						{
							title: "创建时间",
							key: "ct",
						}
					],
					data: [],
					brands: [],
				},
				//求买
				carBuy: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "车辆描述",
							key: "title",
						},
						{
							title: "车辆详情",
							key: "details",
						},
						{
							title: "联系人",
							key: "personName",
						},
						{
							title: "联系电话",
							key: "phone",
						},
						{
							title: "创建时间",
							key: "ct",
						}
					],
					data: [],
					brands: [],
				},
				carConditions: [

					{
						conditionId: 1,
						label: '买车信息'
					},
					{
						conditionId: 2,
						label: '买房信息'
					},
					{
						conditionId: 3,
						label: '租车信息'
					},
					{
						conditionId: 4,
						label: '租房信息'
					},

				],
				mileages: [{
						mileageId: 1,
						label: '房屋出租'
					},
					{
						mileageId: 2,
						label: '房屋出售'
					},
					{
						mileageId: 3,
						label: '房屋求租'
					},
					{
						mileageId: 4,
						label: '房屋求购'
					},
					{
						mileageId: 5,
						label: '车辆出租'
					},
					{
						mileageId: 6,
						label: '车辆出售'
					},
					{
						mileageId: 7,
						label: '车辆求租'
					},
					{
						mileageId: 8,
						label: '车辆求购'
					}
				],
				userId: 0,
				roles: [],
				allRoles: [],
			}
		},

		methods: {
			edeit: function() {
							let self = this;
							
							if (this.$data.client.account.length == 0) {
								this.message.error("账号必须输入");
								return;
							}
							if (this.$data.client.password.length == 0) {
								this.message.error("密码必须输入");
								return;
							}
							this.http.put({
								url: "/client/info",
								param: {
									 personId:self.$data.client.personId,
									clientId:self.$data.client.clientId,
									account: self.$data.client.account,
									password: self.$data.client.password,
									personId:self.$data.person.personId,
									phone:self.$data.person.phone,
									identityCard:self.$data.person.identityCard,
									personName:self.$data.person.personName,
								}
							}).then(data => {
								self.message.info("修改成功");
								self.$tabs.close();
								this.$router.push({
									name:"order",
									param:{
									}
									
								})
								
							});
						},
			selectId: function() {
				let self = this;
				self.$data.mileageId = null;
				if (self.$data.conditionId == 1) {
					self.searchCarBuy();
				} else if (self.$data.conditionId == 2) {
					self.searchHouseBuy();
				} else if (self.$data.conditionId == 3) {
					self.searchCarRent();
				} else if (self.$data.conditionId == 4) {
					self.searchHouseLease();
				}
			},
			selectId1: function() {
				let self = this;
				self.$data.conditionId = null;
				if (self.$data.mileageId == 1) {
					self.houseRent();
				} else if (self.$data.mileageId == 2) {
					self.houseSell();
				} else if (self.$data.mileageId == 3) {
					self.houseRentalInfo();
				} else if (self.$data.mileageId == 4) {
					self.houseBuy1();
				} else if (self.$data.mileageId == 5) {
					self.carRentalInfo();
				} else if (self.$data.mileageId == 6) {
					self.carSellInfo();
				} else if (self.$data.mileageId == 7) {
					self.carRentInfo();
				} else if (self.$data.mileageId == 8) {
					self.carBuyInfo();
				}

			},
			cancel: function() {
				this.$tabs.close();
			},

			init: function() {
				let self = this;
				self.http.get({
					url: "/client/info",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {

					self.$data.client = data.client;
					self.$data.person = data.person;
				});
			},
			searchHouseLease: function() {
				let self = this;
				this.http.get({
					url: "/house-lease-client-vo/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.houseLeaseInfo.currentPage = data.current;
					this.$data.houseLeaseInfo.total = data.total;
					this.$data.houseLeaseInfo.pageSize = data.size;
					this.$data.houseLeaseInfo.data = data.records;
				});
			},
			//买车
			searchCarBuy: function() {
				let self = this;
				this.http.get({
					url: "/car-buy-client-vo/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.tableInfo.currentPage = data.current;
					this.$data.tableInfo.total = data.total;
					this.$data.tableInfo.pageSize = data.size;
					this.$data.tableInfo.data = data.records;
				});
			},
			//买房
			searchHouseBuy: function() {
				let self = this;
				this.http.get({
					url: "house-buy-client-vo/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.houseBuyInfo.currentPage = data.current;
					this.$data.houseBuyInfo.total = data.total;
					this.$data.houseBuyInfo.pageSize = data.size;
					this.$data.houseBuyInfo.data = data.records;
				});
			},
			//租车
			searchCarRent: function() {
				let self = this;
				this.http.get({
					url: "car-rental-info/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.carRetalInfo.currentPage = data.current;
					this.$data.carRetalInfo.total = data.total;
					this.$data.carRetalInfo.pageSize = data.size;
					this.$data.carRetalInfo.data = data.records;
				});
			},

			// 车辆出租
			carRentalInfo: function() {
				let self = this;
				this.http.get({
					url: "/car-rental-info/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.carRentBuyInfo.currentPage = data.current;
					this.$data.carRentBuyInfo.total = data.total;
					this.$data.carRentBuyInfo.pageSize = data.size;
					this.$data.carRentBuyInfo.data = data.records;
				});
			},
			//车辆出售
			carSellInfo: function() {
				let self = this;
				this.http.get({
					url: "/car-sell-info/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.carRentBuyInfo.currentPage = data.current;
					this.$data.carRentBuyInfo.total = data.total;
					this.$data.carRentBuyInfo.pageSize = data.size;
					this.$data.carRentBuyInfo.data = data.records;
				});
			},
			//车求购
			carBuyInfo: function() {
				let self = this;
				this.http.get({
					url: "/car-buy-info/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.carBuy.currentPage = data.current;
					this.$data.carBuy.total = data.total;
					this.$data.carBuy.pageSize = data.size;
					this.$data.carBuy.data = data.records;
				});
			},
			//车求租
			carRentInfo: function() {
				let self = this;
				this.http.get({
					url: "/car-rent-info/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.carRent.currentPage = data.current;
					this.$data.carRent.total = data.total;
					this.$data.carRent.pageSize = data.size;
					this.$data.carRent.data = data.records;
				});
			},
			//董
			//房出租
			houseRent: function() {
				let self = this;
				this.http.get({
					url: "/house-lease-client-vo/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.houseRentInfo.currentPage = data.current;
					this.$data.houseRentInfo.total = data.total;
					this.$data.houseRentInfo.pageSize = data.size;
					this.$data.houseRentInfo.data = data.records;
				});
			},
			//房出售
			houseSell: function() {
				let self = this;
				this.http.get({
					url: "/house-sell-client-vo/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.houseSellInfo.currentPage = data.current;
					this.$data.houseSellInfo.total = data.total;
					this.$data.houseSellInfo.pageSize = data.size;
					this.$data.houseSellInfo.data = data.records;
				});
			},
			//房屋求租
			houseRentalInfo: function() {
				let self = this;
				this.http.get({
					url: "/house-rent-client-vo/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.houseRental.currentPage = data.current;
					this.$data.houseRental.total = data.total;
					this.$data.houseRental.pageSize = data.size;
					this.$data.houseRental.data = data.records;
				});

			},
			//房屋求购
			houseBuy1: function() {
				let self = this;
				this.http.get({
					url: "house-buy-client-vo/page",
					param: {
						clientId: self.$data.clientId
					}
				}).then(data => {
					this.$data.houseBuy.currentPage = data.current;
					this.$data.houseBuy.total = data.total;
					this.$data.houseBuy.pageSize = data.size;
					this.$data.houseBuy.data = data.records;
				});
			}
		},
		created: function() {
			this.$data.clientId = this.$route.params.clientId;
			this.init();
		},
	}
</script>

<style>
	.el-dropdown-link {

		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.el-button--primary {
		color: #000;
		background-color: #fff;
		border-color: lightgray;
		margin-left: 10px;
	}
</style>
